<template>
  <div class="project-experience">
    <div class="project-box" style="padding-top: 56rem;">
      <p class="project">project.</p>
      <p class="title">项目经验（近期项目）</p>
      <div class="right">
        <div class="item-box">
          <div class="title-left">项目名称：</div>
          <p class="text" style="font-weight: 700;">设计院综合业务管理系统（PC 端）</p>
        </div>
        <div class="item-box">
          <div class="title-left">项目周期：</div>
          <p class="text">2023-02-01 至 2023-11-02</p>
        </div>
        <div class="item-box">
          <div class="title-left">项目大小：</div>
          <p class="text">960 MB（包含图片文件等，仅供参考）</p>
        </div>
        <div class="item-box">
          <div class="title-left">访问地址：</div>
          <a class="text a" href="http://47.92.4.136:8000" target="_blank">http://47.92.4.136:8000</a>
        </div>
        <div class="item-box">
          <div class="title-left">UI图地址：</div>
          <a
            class="text a"
            href="https://mastergo.com/file/77836380747014"
            target="_blank"
          >https://mastergo.com/file/77836380747014</a>
        </div>
        <div class="item-box">
          <div class="title-left">项目职责：</div>
          <p class="text">负责项目的需求分析、UI 界面的设计以及前端的全程开发</p>
        </div>
        <div class="item-box">
          <div class="title-left">项目介绍：</div>
          <p class="text">
            项目概括：针对电力设计院开发的综合业务管理系统，做到项目的流程化、标准化、简单化，部门及个人绩效的智能计算，员工效率的实时数据化展示等。
            主要功能：
            <br />1.运营统计：使用柱状图、扇形图、折线图等数据可视化展示公司季度收入情况、回款金额、项目完成度、近期工作动态、各个小组工作统计等。
            <br />2.任务代办：展示用户代办任务、已办任务、发起的任务，并引导用户填写表单或者跳转所需页面。
            <br />3.合同管理：新增合同表单的填写、校验，通过条件查询合同列表。
            <br />4.项目管理：将项目流程化的同时可实时的跟踪项目进行的状态，并通过时间轴的方式记录项目每一个节点，保证可追溯每一条表单数据、处理人、审核人等。
            <br />5.绩效管理：通过条件查询项目相关人员绩效，自定义计算绩效的格式，编辑项目绩效有关数据。
            <br />6.档案管理：根据文件格式、提供专业、文件类型等条件将档案分类，并通件查询所需档案。
          </p>
        </div>
        <div class="item-box">
          <div class="title-left">所用技术：</div>
          <p class="text">
            使用 Ant Design Pro 完成项目的基本搭建；
            <br />使用 Ant Design of Vue 完成静态页面绘制；
            <br />使用 Vue 和 Ant Design of Vue 完成动态渲染及交互；
            <br />使用 axios 完成数据请求
            <br />使用 git 进行代码的云端存储和管理
          </p>
        </div>
      </div>
    </div>
    <div class="project-box project-box-two">
      <div class="right right-box">
        <div class="item-box">
          <div class="title-left">项目名称：</div>
          <p class="text" style="font-weight: 700;">批量出图系统官网（ PC 端）</p>
        </div>
        <div class="item-box">
          <div class="title-left">项目周期：</div>
          <p class="text">2022-12-08 至 2023-02-01</p>
        </div>
        <div class="item-box">
          <div class="title-left">项目大小：</div>
          <p class="text">68.1 MB（包含图片文件等，仅供参考）</p>
        </div>
        <div class="item-box">
          <div class="title-left">访问地址：</div>
          <a class="text a" href="https://www.eplot.com.cn" target="_blank">https://www.eplot.com.cn</a>
        </div>
        <div class="item-box">
          <div class="title-left">UI图地址：</div>
          <a
            class="text a"
            href="https://mastergo.com/file/84448210316142"
            target="_blank"
          >https://mastergo.com/file/84448210316142</a>
        </div>
        <div class="item-box">
          <div class="title-left">项目职责：</div>
          <p class="text">负责项目的需求分析、UI 界面的设计以及前端的全程开发</p>
        </div>
        <div class="item-box">
          <div class="title-left">项目介绍：</div>
          <p class="text">
            项目概括：一款设计院批量打印设计图软件的官网。
            <br />主要功能：
            <br />1.使用微信扫码登录官网或通过软件跳转官网。
            <br />2.使用导航栏展示软件信息、更新日志、个人中心等不同页面。
            <br />3.用户反馈的提交。
            <br />4.更新日志的处理及展示。
            <br />5.个人信息的展示、产品套餐信息和产品支付二维码的展示、用户通过微信支付购买套餐、个人订单的查询。
          </p>
        </div>
        <div class="item-box">
          <div class="title-left">所用技术：</div>
          <p class="text">
            使用 Vue3 + Vite 完成项目的基本搭建；
            <br />使用 html + Less 完成静态页面绘制；
            <br />使用 Vue 完成动态渲染及交互；
            <br />使用 axios 完成数据请求；
            <br />使用 git 进行代码的云端存储和管理；
          </p>
        </div>
      </div>
    </div>
    <div class="project-box project-box-three">
      <div class="right right-box">
        <div class="item-box">
          <div class="title-left">项目名称：</div>
          <p class="text" style="font-weight: 700;">图文店商城（微信小程序）</p>
        </div>
        <div class="item-box">
          <div class="title-left">项目周期：</div>
          <p class="text">2022-08-01 至 2022-09-14</p>
        </div>
        <div class="item-box">
          <div class="title-left">项目大小：</div>
          <p class="text">11.7 MB（包含图片文件等，仅供参考）</p>
        </div>
        <div class="item-box">
          <div class="title-left">访问地址：</div>
          <p class="text">暂未上线</p>
        </div>
        <div class="item-box">
          <div class="title-left">UI图地址：</div>
          <a
            class="text a"
            href="https://mastergo.com/file/69066890936783"
            target="_blank"
          >https://mastergo.com/file/69066890936783</a>
        </div>
        <div class="item-box">
          <div class="title-left">项目职责：</div>
          <p class="text">负责项目的需求分析、UI 界面的设计以及前端的全程开发</p>
        </div>
        <div class="item-box">
          <div class="title-left">项目介绍：</div>
          <p class="text">
            项目概括：支持线上购买图文店经营服务的软件。
            <br />主要功能：
            <br />1.用户通过手机验证码进行注册及登录。
            <br />2.用户需要服务时，可以搜索附近图文店并进项线上购买所需服务。
            <br />3.用户可将商品加入购物车并合并下单。
            <br />4.用户可以查询并跟踪订单情况，跟踪其是否接单、制作、运输等。
            <br />5.用户添加多个收货地址，并在购买服务时选择或添加收获地址。
          </p>
        </div>
        <div class="item-box">
          <div class="title-left">所用技术：</div>
          <p class="text">
            使用 uni-app 完成项目的基本搭建；
            <br />使用 wxml 加 less 完成静态页面绘制；
            <br />使用 Vue 和 微信开发者工具 api 完成动态渲染及交互；
            <br />使用 axios 完成数据请求；
            <br />使用 git 进行代码的云端存储和管理；
          </p>
        </div>
      </div>
    </div>
    <div class="project-box project-box-three">
      <div class="right right-box">
        <div class="item-box">
          <div class="title-left">项目名称：</div>
          <p class="text" style="font-weight: 700;">图文店智能综合业务管理系统（ PC 端）</p>
        </div>
        <div class="item-box">
          <div class="title-left">项目周期：</div>
          <p class="text">2022-08-01 至 2022-12-08</p>
        </div>
        <div class="item-box">
          <div class="title-left">项目大小：</div>
          <p class="text">322 MB（包含图片文件等，仅供参考）</p>
        </div>
        <div class="item-box">
          <div class="title-left">访问地址：</div>
          <p class="text">暂未上线</p>
        </div>
        <div class="item-box">
          <div class="title-left">UI图地址：</div>
          <a
            class="text a"
            href="https://mastergo.com/file/74314344515802"
            target="_blank"
          >https://mastergo.com/file/74314344515802</a>
        </div>
        <div class="item-box">
          <div class="title-left">项目职责：</div>
          <p class="text">负责项目的需求分析、UI 界面的设计以及前端的全程开发</p>
        </div>
        <div class="item-box">
          <div class="title-left">项目介绍：</div>
          <p class="text">
            项目概括：帮助图文店经营者以及员工管理旗下所有的图文店铺
            <br />主要功能：
            <br />1.使用手机验证码或微信扫码登录。
            <br />2.订单管理：对店铺订单进行添加、修改、查询、删除，且订单分为会员订单以及散客订单。
            <br />3.客户管理：客户信息增删改查、客户账户充值统计以及记录的查询、客户收获地址的管理、客户开票信息的管理。
            <br />4.店铺管理：各个店铺收入情况分析并以仪表盘形式展示。店铺经营服务的分类，店铺产品的价格、材料、数量、工艺等设置和发布。
            <br />5.人力资源：员工账号的权限管理，员工信息的管理。
          </p>
        </div>
        <div class="item-box">
          <div class="title-left">所用技术：</div>
          <p class="text">
            使用 Ant Design Pro 完成项目的基本搭建；
            <br />使用 Ant Design of Vue 完成静态页面绘制；
            <br />使用 Vue 和 Ant Design of Vue 完成动态渲染及交互；
            <br />使用 axios 完成数据请求；
            <br />使用 git 进行代码的云端存储和管理；
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: 'ProjectExperience',
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data () {
    return {

    }
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
  * 组件实例创建完成，属性已绑定，但DOM还未生成，el属性还不存在
  */
  created () { },
  /**
  * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
  * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
  */
  mounted () { },
  // 组件方法
  methods: {
  }
}
</script>

<style scoped lang="less">
.project-experience {
  width: 100%;
  height: 4320rem;
  background: #fbf8cc;
  .project-box {
    position: relative;
    margin: auto;
    width: 1240rem;
    height: 1080rem;
    p {
      margin: 0;
    }
    .project {
      font-weight: 700;
      font-size: 60rem;
      color: #f7f197;
    }
    .title {
      margin-bottom: 20rem;
      font-weight: 700;
      font-size: 30rem;
      color: #002b46;
    }
    .text-one {
      font-size: 18rem;
      color: #03045e;
    }
    .text-two {
      margin-bottom: 20rem;
      font-size: 18rem;
      color: #03045e;
    }
    .right {
      .item-box {
        display: flex;
        margin-bottom: 15px;
        .title-left {
          margin-right: 10rem;
          font-size: 16rem;
          font-weight: 700;
          color: #03045e;
        }
        .text {
          width: 1140rem;
          font-size: 16rem;
          color: #03045e;
          letter-spacing: 2rem;
        }
        a:hover {
          color: #6d6fda;
        }
      }
    }
    .right-box {
      position: absolute;
      top: 50%;
      transform: translateY(-75%);
    }
  }
  .project-box-two {
    margin-top: 90rem;
    .left {
      .img-two {
        display: block;
        margin-bottom: 30rem;
        width: 300rem;
        box-shadow: 0rem 4rem 10rem 0rem rgba(0, 0, 0, 0.3);
      }
    }
  }
  .project-box-three {
    .left {
      .img-two {
        display: block;
        margin-bottom: 30rem;
        width: 300rem;
        box-shadow: 0rem 4rem 10rem 0rem rgba(0, 0, 0, 0.3);
      }
    }
  }
}
</style>
